<template>
	<div class="pagination">
		<el-pagination
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[10, 20, 30, 50]"
			background
			layout="prev, pager, next, jumper, sizes, total"
			:total="100"
		/>
	</div>
</template>

<script lang="ts">
	export default {
		name: 'Pagination',
	};
</script>

<script setup lang="ts">
	import { ref } from 'vue';

	// 当前页数
	let currentPage = ref(1);
	// 每页显示条目个数
	let pageSize = ref(10);
</script>

<style scoped lang="scss">
	.pagination {
		margin: 20px 0;
	}
</style>
